<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>扫雷联机版官网</title>
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/index.css">
		<script src="js/base.js"></script>
		<!-- import Vue before Element -->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<!-- import JavaScript -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<!-- axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>
		<div id="index-page">
			<!-- 头部开始 -->
			<header class="header" id="header" :style="{backgroundColor: (FixedFlag==true ?' #FFFFFF' : '' )} ">
				<div class="head-body">
					<a :href="andHref">
					<div class="logo">
						<img src="img/logo.png" alt="">
					</div>
					</a>
				</div>
			</header>
			<!-- 头部结束 -->
			<!-- banner开始 -->
			<div class="banner">
				<!-- 轮播图第一个内容开始 -->
				<div class="banner-one" id="ban-one">
					<div class="banner-one-body">
						<div class="w600">
							<h1></h1>
							<a :href="andHref"></a>
						</div>
						<div class="w800"></div>
						<div class="w1349"></div>
					</div>
				</div>
				
				<!-- 轮播图第一个内容结束 -->
				
				<!-- 轮播图第二个内容开始 -->
				<!-- <div class="banner-two" id="ban-two" style="z-index: 0;">
					<div class="bck-top"></div>
					<div class="bck-bottom"></div>
					<a :href="andHref"><div class="bck-center"></div></a>
				</div> -->
				<!-- 轮播图第二个内容结束 -->

				<!-- 两个按钮开始 -->
				<!-- <button class="button-one" id="one"></button>
				<button class="button-two" id="two"></button> -->
				<!-- 两个按钮结束 -->
			</div>
			<!-- banner结束 -->
			<!-- iq 每一天开始 -->
			<div class="content"></div>
			<!-- iq 每一天结束 -->
			<!-- 背景定位第一个开始 -->
			<div class="back-one"></div>
			<!-- 背景定位第一个结束 -->
			<!-- 手机沟通开始 -->
			<div class="sound">
				<div class="sound-body">
					<div class="bck-let"></div>
					<!-- 右面的内容开始 -->
					<div class="bck-rgt">
						<h2></h2>
						<p>
							打破传统扫雷的单机模式，创新加入联机对战模式<br>
							随时随地与好友来一场痛快的pk
						</p>
						<a @click="warning">了解更多>></a>
						<br>
						<ul>
							<li>单人模式</li>
							<li>多人联机</li>
							<li>pk排名</li>
						</ul>
					</div>
					<!-- 右面的内容结束 -->
				</div>
			</div>
			<!-- 手机沟通结束 -->
			<!-- 背景定位第二个开始 -->
			<div class="back-two"></div>
			<!-- 背景定位第二个结束 -->
			<!-- 接收沟通开始 -->
			<div class="receive">
				<div class="receive-body">
					<!-- 右面的内容开始 -->
					<div class="bck-rgt">
						<h2></h2>
						<p>
							多项排名展示列表<br>
							实时更新数据，让每个玩家都看到你的强悍实力
						</p>
						<a @click="warning">了解更多>></a>
						<br>
						<ul>
							<li>单人模式</li>
							<li>多人联机</li>
							<li>pk排名</li>
						</ul>
					</div>
					<!-- 右面的内容结束 -->
					<div class="bck-let"></div>
				</div>
			</div>
			<!-- 接收沟通结束 -->
			<!-- 背景定位第三个开始 -->
			<div class="back-san"></div>
			<!-- 背景定位第三个结束 -->
			<!-- 青春沟通开始 -->
			<div class="youth">
				<div class="youth-body">
					<div class="bck-let">
						<ul>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</div>
					<!-- 右面的内容开始 -->
					<div class="bck-rgt">
						<h2></h2>
						<p>
							即使世界很大，也有人会和你一样一边玩着扫雷 <br>
							一边回想起童年时电脑课上和小伙伴一起玩时快乐
						</p>
						<a @click="warning">了解更多>></a>
						<br>
						<ul>
							<li>单人模式</li>
							<li>多人联机</li>
							<li>pk排名</li>
						</ul>
					</div>
					<!-- 右面的内容结束 -->
				</div>
			</div>
			<!-- 青春沟通结束 -->
			<!-- 底部版权开始 -->
			<div class="bottom" id="bottom">
				<div class="bottom-body">
					<!-- 左边的通讯工具开始 -->
					<div class="bck-lft">
						<h3>了解热门产品</h3>
						<ul>
							<a :href="andHref">
								<li>扫雷手机版</li>
							</a>
							<li @click="warning">扫雷PC版</li>
							<li @click="warning">扫雷Mac版</li>
							<li @click="warning">扫雷Pad版</li>
						</ul>
					</div>
					<!-- 左边的通讯工具结束 -->
					<div class="bck-rht">
						<ul>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
						</ul>
						<ul>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
						</ul>
						<ul>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
						</ul>
						<ol>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
							<li @click="warning">占个位置</li>
						</ol>
					</div>
				</div>
				<p class="font-one"><a href="https://beian.miit.gov.cn/#/Integrated/recordQuery"
						style="text-decoration: none;color: grey;">赣ICP备2020011871号-1</a></p>
				<p class="font-two" style="margin-top: 20px;">个人网站 请勿攻击 阿弥陀佛</p>
			</div>
			<!-- 底部版权结束 -->
		</div>
	</body>
	<script>
		
		var _self
	
		new Vue({
			el: "#index-page",
			data() {
				return {
					message: "Hello Element Plus",
					FixedFlag: false,
					andHref: "ffff"
				};
			},
			created() {
				_self = this
				// 获取最新版本
				axios.get('https://gateway.xiaohong.work/api/saolei/saoleiVersion/lastest', {
					params: {
						name: "扫雷联机版"
					}
				})
				.then(function(res) {
						if (res.data.code === 20000) {
							// console.log(res.data.data.updateUrl)
							_self.andHref = res.data.data.updateUrl
						} else {
					console.log(res.data);
						}
				 })
				.catch(function(error) {
					console.log(error);
				})
			},
			mounted() {
				window.addEventListener('scroll', this.handleScroll)
			},
			unmounted() {
				window.removeEventListener('scroll', this.handleScroll)
			},
			methods: {
				handleScroll() {
					let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
						document.body.scrollTop
					if (scrollTop >= 900) {
						this.FixedFlag = true
					} else {
						this.FixedFlag = false
					}
				},
				warning() {
					// this.$alert(
					// 	'<div style="text-align: center; margin-left: 200px"><img src="img/busy.gif" style="width: 200px;height: 200px;"><div>别催了，别催了，在做了....</div></div>',
					// 	'提示', {
					// 		dangerouslyUseHTMLString: true
					// 	});
					alert("别催了，别催了，在做了....")
				}
			}
		})
	</script>

</html>
